<template>
  <page-frame>
    <div class="emergencyRescue">
      <div class="toptitle">
        <div class="left">紧急救助</div>
        <div class="right">
          <div class="btns">
           <el-button @click="addRescue" class="lightGreenBtn">新增救助</el-button>
            <el-button @click="addRescue" class="lightGreenBtn">信息通报</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="fileId" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item"   v-show="fileId=='1'">
                <el-date-picker v-model="queryData.userName" placeholder="请选择报警时间" type="date" style="width:81%!important;">
                </el-date-picker>
              </div>
              <div class="input-item"   v-show="fileId=='2'">
                <el-input v-model="queryData.userName" placeholder="请输入会员姓名" style="width:81%!important;">
                </el-input>
              </div>
              <div class="input-item"   v-show="fileId=='3'">
                <el-input v-model="queryData.userName" placeholder="请输入处理状态" style="width:81%!important;">
                </el-input>
              </div>

            </el-col>
            <el-col :span="2" :offset="0">
              <div class="btns" style=" width:70%;">
                <el-button class="query lightGreenBtn" @click="loadDataTable">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="schedule=true"
            style="width: 100%">
            <el-table-column
              prop="alarmRinging"
              label="报警时间"
            >
            </el-table-column>
            <el-table-column
              prop="alramLocation"
              label="报警位置"
            >
            </el-table-column>
            <el-table-column
              prop="member"
              label="会员姓名"
            >
            </el-table-column>
            <el-table-column
              prop="contact"
              label="联系方式"
            >
            </el-table-column>
            <el-table-column
              prop="contactPerson"
              label="紧急联系人"
            >
            </el-table-column>
            <el-table-column
              prop="accidentType"
              label="事故类型"
            >
            </el-table-column>
            <el-table-column
              prop="accidentDescription"
              label="事故描述"
            >
            </el-table-column>
            <el-table-column
              prop="dealer"
              label="处理人"
            >
            </el-table-column>
            <el-table-column
              prop="dealer"
              label="处理状态"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
            >
              <template scope="scope">
                <el-button v-show="scope.row.isRescue" type="text" size="small" @click.stop="rescue()">紧急救助</el-button>
                <el-button v-show="!scope.row.isRescue" type="text" size="small" @click.stop="detailSheet()">立即处理</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import Vue from 'vue'
  import VueResource from 'vue-resource';
  Vue.use(VueResource);
  export default {
    methods: {
      init(){
        this.loadDataTable()
      },
      loadDataTable(){

      },
      addRescue(){
        this.$router.push({name: 'emergencyRescueBailout'});
      },
      rescue(){
        this.$router.push({name: 'emergencyRescueBailout'});
      },
      detailSheet(){
        this.$router.push({name: 'emergencyRescueBailout'});
      },
      recordSheet(){
      },
      handleCurrentChange(val) {

      },
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.loadTableData();
      },
    },
    mounted: function () {
      this.init();
    },
    data () {
      return {
        schedule:false,
        fileId:1,
        fileList:[{
          fileId: 1,
          fileName: "报警时间"
        },{
          fileId: 2,
          fileName: "会员姓名",
        },{
          fileId: 3,
          fileName: "处理状态",
        }],
        processOptions:[{
          value: 'yishenqing',
          label: '已申请'
        },{
          value: 'yishenhe',
          label: '已审核'
        },{
          value: 'yizhixing',
          label: '已执行'
        }],
        queryData:{
          userName:''
        },
        tableData: [{
          "alarmRinging":"2017-08-07 08:10",
          "alramLocation":"报警位置",
          "member":"会员姓名",
          "contact":"18616961696",
          "contactPerson":"紧急联系人",
          "accidentType":"事故类型",
          "accidentDescription":"事故描述",
          "dealer":"处理人",
          "isRescue":false
        },{
          "alarmRinging":"2017-08-07 08:10",
          "alramLocation":"2号楼1层",
          "member":"王楠",
          "contact":"18616961696",
          "contactPerson":"丽丽",
          "accidentType":"事故类型",
          "accidentDescription":"事故描述",
          "dealer":"处理人",
          "isRescue":true
        }],
        total:0,
        currentPage: 1,
      }
    },
  }
</script>
<style>

  .emergencyRescue .input .btns{
    margin-top:0;
  }
  .emergencyRescue .el-input{
    width: 80%;
  }
  .emergencyRescue .input input{
    display: inline-block;
  }
  .emergencyRescue .scroll{
    height: calc(100vh - 122px);
    padding:0px 50px;
  }
  .emergencyRescue .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .emergencyRescue .el-select {
    display: block;
    position: relative;
  }
  .emergencyRescue .el-button+.el-button{
    margin-left: 0!important;
  }
</style>
